<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<script src="../jquery-1.11.3.min.js"></script>
		<script type="text/javascript">
			$(function(){
//				选中#father里所有的儿子辈的p标签 
//				如果不加参数 就是所有的子辈
//				$('#father').children('p').css({'color':'purple'});

//				查找到...  *
//				$('#father').find('.three').css({'color':'pink'});

				//下一个
//				$('#father .three').next().css({'color':'pink'});

				//上一个
//				$('#father .three').prev().css({'color':'pink'});

				//后面所有的
//				$('#father .three').nextAll().css({'color':'pink'});

				//上面所有的
//				$('#father .three').prevAll().css({'color':'pink'});
				
				//抓到父级的
//				$('#father .son .sonP span').parent().css({'color':'red'});

				//抓到所有父辈的  *
//				$('#father .son .sonP span').parents().css({'color':'red'});

//				兄弟元素   *
//				$('#father .son .sonP').siblings('p').css({'color':'red'});
			})
		</script>
	</head>

	<body>
		<div id="father">
			<p>我们都是p标签</p>
			<p class="two">我们都是p标签</p>
			<span class="three">我们都是p标签</span>
			<p>我们都是p标签</p>
			<p>我们都是p标签</p>
			<p>我们都是p标签</p>
			<div class="son">
				<p class="sonP">我们也是p标签<span>{我是p标签当中的span}</span></p>
				<p>我们也是p标签</p>
				<p>我们也是p标签</p>
			</div>
			<div class="small">
				<p>我们也是p标签</p>
				<p>我们也是p标签</p>
				<p>我们也是p标签</p>
			</div>
		</div>
	</body>

</html>